<template>
  <div>
    <h1>1. ref 和 $refs</h1>
    <!-- ref 不能和其他标签的 ref 重复 -->
    <h2 id="hh" ref="title">这是一个 h2</h2>
    <button @click="getH2">点我获取 h2</button>
    <h1>2. ref 和 $refs 获取 组件对象</h1>
    <Demo ref="de" />
    <button @click="getDemo">点我获取 Demo 组件</button>
  </div>
</template>

<script>
  import Demo from './components/Demo.vue'
export default {
  components: {
    Demo
  },
  data() {
    return {
      
    };
  },
  methods: {
    getH2() {
      // this.$refs.名字
      console.log(this.$refs.title)
      console.log(document.querySelector('#hh'))
    },
    getDemo() {
      console.log(this.$refs.de)
      console.log(this.$refs.de.name)
    }
  }
};
</script>

<style lang="scss" scoped>

</style>